<template>
  <div class="container_main">
    <div class="firstBox"></div>
    <div class="secondBox">
      <div class="hollCard">
        <div style="height: 100%; position: relative" v-for="(items, index) in secondTwoBoxTable" :key="index">
          <div class="titleStove">
            <!-- <div class="divGroup">
              <i class="iconfont_class" :class="items.icons"></i>
              <div class="typeface">{{items.titleName}}</div>
            </div> -->
            <div class="tabPage">
              <!--  type="card" -->
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <!--  :lazy="true" -->
                <el-tab-pane label="实时" name="realTimeData"></el-tab-pane>
                <!--  -->
                <!-- <el-tab-pane label="装炉" name="potData"></el-tab-pane> -->
                <el-tab-pane  label="报表" v-if="rolss === '超级管理员'" name="historyInformation"></el-tab-pane>
                <el-tab-pane label="位移变化" name="displacementChange"></el-tab-pane>
              </el-tabs>
            </div>
            <!-- <div class="tabPage">{{items.nums}}号炉窑&nbsp;&nbsp;环保在线监测</div> -->
          </div>
          <secondTabs v-if="historyif"></secondTabs>
          <div v-if="tableif" class="currentTime">
            <div v-if="noDatas" class="cardCurrent">
              <div class="card-title">
                <div class="text">装炉</div>
                <!-- <div class="code">{{form.stoveTime}} / {{form.totalNumber}}支 / {{form.totalWeight}}吨</div> -->
              </div>
              <div style="color:#A5A5A5;text-align:center;">
                暂无数据
              </div>
            </div>
            <div v-else>
              <div class="cardCurrent">
                <div class="card-title">
                  <div class="text">装炉</div>
                  <div class="code">{{form.stoveTime}} / {{form.totalNumber}}支 / {{form.totalWeight}}吨</div>
                </div>
                <div class="tableClass">
                  <table>
                    <tr class="table_key">
                      <td>加工单位</td>
                      <td>种类/规格</td>
                      <td>数量</td>
                      <td>长度</td>
                      <td>单重</td>
                      <td>重量</td>
                    </tr>
                    <tr class="table_value" v-for="item in form.stoveReport" :key="item._id">
                      <td>{{item.processUnit}}</td>
                      <td>{{item.type}} {{item.specification}}</td>
                      <td>{{item.number==0?'':item.number}}</td>
                      <td>{{item.length==0?'':item.length}}</td>
                      <td>{{item.singleWeight==0?'':item.singleWeight}}</td>
                      <td>{{item.weight==0?'':item.weight}}</td>
                    </tr>
                  </table>
                </div>
              </div>
              <!-- <hr style="height: 1px; border: none; border-top: 7px solid rgb(21, 20, 25)"/> -->
              <div class="cardCurrent">
                <div class="card-title">
                  <div class="text">送电</div>
                  <div class="code">{{form.electric.startElectricTime}}</div>
                </div>
                <div class="tableClass">
                  <table>
                    <tr class="table_key">
                      <td colspan='2'>总第炉数</td>
                      <td colspan='2'>送电开始功率</td>
                      <td colspan='2'>计划电量</td>
                      <td colspan='2'>计划电量</td>
                    </tr>
                    <tr class="table_value">
                      <td colspan='2'>{{form.electric.totalStoveNum}}</td>
                      <td colspan='2'>{{form.electric.startPower}}</td>
                      <td colspan='2'>{{form.electric.plannedElectricity}}</td>
                      <td colspan='2'>{{form.electric.plannedElectricity}}</td>
                    </tr>
                    <tr class="table_key">
                      <td colspan='2'>装炉柱数</td>
                      <td colspan='2'>单柱串接</td>
                      <td colspan='2'>截面</td>
                      <td colspan='2'>电密</td>
                    </tr>
                    <tr class="table_value">
                      <td colspan='2'>{{form.electric.stoveColumnNum}}</td>
                      <td colspan='2'>{{form.electric.oneColumnStrand}}</td>
                      <td colspan='2'>{{form.electric.section}}</td>
                      <td colspan='2'>{{form.electric.denseElectricity}}</td>
                    </tr>
                    <tr class="table_key">
                      <td colspan='2'>位移要求</td>
                      <td colspan='2'>配重</td>
                      <td colspan='2'>保温料</td>
                      <td colspan='2'>装炉方式</td>
                    </tr>
                    <tr class="table_value">
                      <td colspan='2'>{{form.electric.displacementLess}}</td>
                      <td colspan='2'>{{form.electric.counterweight}}</td>
                      <td colspan='2'>{{form.electric.keepWarmMaterial}}</td>
                      <td colspan='2'>{{form.electric.stoveWay}}</td>
                    </tr>
                  </table>
                </div>
              </div>
              <!-- <hr style="height: 1px; border: none; border-top: 7px solid rgb(21, 20, 25)"/> -->
              <div class="cardCurrent">
                <div class="card-title">
                  <div class="text">送电曲线</div>
                </div>
                <div class="tableClass">
                  <table>
                    <tr class="table_key">
                      <td>时间</td>
                      <td colspan='7'>功率（KW）</td>
                    </tr>
                    <tr class="table_value" v-for="item in 4" :key="item" >
                      <td colspan='2'>{{(item-1)*6}}-{{(item-1)*6+6}}h</td>
                      <td>{{form.electric.powerTime[0 + (item-1)*6].power}}</td>
                      <td>{{form.electric.powerTime[1 + (item-1)*6].power}}</td>
                      <td>{{form.electric.powerTime[2 + (item-1)*6].power}}</td>
                      <td>{{form.electric.powerTime[3 + (item-1)*6].power}}</td>
                      <td>{{form.electric.powerTime[4 + (item-1)*6].power}}</td>
                      <td>{{form.electric.powerTime[5 + (item-1)*6].power}}</td>
                    </tr>
                  </table>
                </div>
              </div>
              <!-- <hr style="height: 1px; border: none; border-top: 7px solid rgb(21, 20, 25)"/> -->
              <div class="cardCurrent">
                <div class="card-title">
                  <div class="text">停电</div>
                  <div class="code">{{form.electric.stopElectricTime}}</div>
                </div>
                <table>
                  <tr class="talbe_key">
                    <td colspan='2'>直流电压</td>
                    <td colspan='2'>直流电流</td>
                    <td colspan='2'>起始炉阻</td>
                    <td colspan='2'>停电功率</td>
                    <td colspan='2'>停炉炉阻</td>
                    <td colspan='2'>吨耗</td>
                  </tr>
                  <tr class="table_value">
                    <td colspan='2'>{{form.electric.voltage==0?'':form.electric.voltage}}</td>
                    <td colspan='2'>{{form.electric.electricCurrent==0?'':form.electric.electricCurrent}}</td>
                    <td colspan='2'>{{form.electric.startStoveResistance==0?'':form.electric.startStoveResistance}}</td>
                    <td colspan='2'>{{form.electric.stopPower==0?'':form.electric.stopPower}}</td>
                    <td colspan='2'>{{form.electric.stopStoveResistance==0?'':form.electric.stopStoveResistance}}</td>
                    <td colspan='2'>{{form.electric.tonConsumption==0?'':form.electric.tonConsumption}}</td>
                  </tr>
                  <tr class="talbe_key">
                    <td colspan='2'>实际电量</td>
                    <td colspan='2'>尖峰</td>
                    <td colspan='2'>高峰</td>
                    <td colspan='2'>平段</td>
                    <td colspan='2'>谷电</td>
                  </tr>
                  <tr class="table_value">
                    <td colspan='2'>{{form.electric.actualElectricity==0?'':form.electric.actualElectricity}}</td>
                    <td colspan='2'>{{form.electric.specialPowerTime[0].power==0?'':form.electric.specialPowerTime[0].power}}</td>
                    <td colspan='2'>{{form.electric.specialPowerTime[1].power==0?'':form.electric.specialPowerTime[1].power}}</td>
                    <td colspan='2'>{{form.electric.specialPowerTime[3].power==0?'':form.electric.specialPowerTime[3].power}}</td>
                    <td colspan='2'>{{form.electric.specialPowerTime[2].power==0?'':form.electric.specialPowerTime[2].power}}</td>
                  </tr>
                </table>
              </div>
            </div>
            <hr style="height: 1px; border: none; border-top: 7px solid rgb(21, 20, 25)"/>
            <div class="cardCurrent">
              <div class="card-title">
                <div class="text">监测数据</div>
              </div>
              <tables :redColor="true" :tableTypes="items" :tableData="items.tableCheckData" />
            </div>
          </div>
          <div style="height: calc(100% - 44.5px);" v-if="displacementif">
            <div class="cardCurrent">
              <div class="card-title">
                <!-- <div class="text">功率VS位移</div> -->
              </div>
              <displacementTable />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="thirdBox">
      <graphProcess :svgData="svgDatas" :DeviceStatus="deviceStatus"/>
      <div class="smallCard">
        <div class="cardTitle">
          <i class="iconfont icon-shishijiance"></i>
          <div class="cardSvg">功率VS位移</div>
          <!-- <i class="el-icon-full-screen btnClas" @click="showMore('power')"></i> -->
        </div>
        <div class="tableThird">
          <powerVsShift :chartsData="thirdBoxTable" />
        </div>
      </div>
    </div>
    <div class="fourthBox">
      <div class="smallCard upCard">
        <div class="cardTitle">
          <i class="iconfont icon-shuju"></i>
          <div class="cardSvg">机组</div>
        </div>
        <div class="forChart">
          <div class="char" v-for="(item, index) in ployData" :key="index">
            <UIRchart :realData="item"/>
          </div>
        </div>
      </div>
      <div class="smallCard downCard">
        <div class="cardTitle">
          <div class="inside">
            <i class="iconfont icon-qushi"></i>
            <div class="cardS">炉阻</div>
            <i v-if="showOpen" class="el-icon-full-screen btnClas" style="margin: 1.5px 0 10px 14px;" @click="showMore('resistance')"></i>
          </div>
        </div>
        <!-- 电量/电价 -->
        <UIRchart :realData="temDatas"/>
      </div>
    </div>
    <el-dialog
      :title="titleChart"
      :visible.sync="centerDialogVisible"
      :modal-append-to-body="false"
      custom-class="dialogClass"
      top="10vh"
      width="50%">
      <!--  v-for="curentCompont in comps" -->
        <div style="color: rgb(196, 198, 199); margin-left: 10px">当前炉: {{RdataNowNum}}号炉</div>
        <div style="height: 300px" :is="curentCompont" :chartDatas="RdataNow"></div>
        <div style="color: rgb(196, 198, 199); margin: 20px 0 0 10px">上一炉: {{RdataLastNum}}号炉</div>
        <div style="height: 300px" :is="curentCompont" :chartDatas="RdataLast"></div>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
import graphProcess from './graphComponents/graphProcess.vue'
import UIRchart from './graphComponents/UIRchart.vue'
import Recharts from './graphComponents/Recharts.vue'
import secondTabs from './graphComponents/secondTabs.vue'
import putInPot from './graphComponents/putInPot.vue'
// import moreLegendChart from '../components/moreLegendChart'
import powerVsShift from './graphComponents/powerVsShift.vue'
import tables from '../components/tables/index.vue'
import displacementTable from './graphComponents/displacementTable.vue'
import Cookies from 'js-cookie'

import { graphiteReportGet } from '@/api/graApi.js'

import '@/mock/allData.js'
export default {
  name: 'tunnel',
  components: {
    graphProcess,
    UIRchart,
    powerVsShift,
    tables,
    Recharts,
    secondTabs,
    putInPot,
    displacementTable
    // moreLegendChart
  },
  data () {
    return {
      noDatas: true, // 判断是否有当前炉数据
      form: {
        electric: {
          powerTime: [
            { power: '' }
          ],
          specialPowerTime: [
            { power: '' },
            { power: '' },
            { power: '' },
            { power: '' },
            { power: '' }
          ]
        }
      },

      activeName: 'historyInformation',
      // activeName: 'displacementChange',
      stoveCode: '',
      startTime: '',
      getTime: '',
      historyif: true,
      displacementif:false,
      tableif: false,
      potif: false,
      showOpen: false, // 展不展示放大按钮 炉阻那里
      centerDialogVisible: false,
      titleChart: '',
      curentCompont: null,
      openData: {}, // 打开弹窗时的放数据的容器
      RdataLast: null,
      RdataLastNum: '',
      RdataNow: null,
      RdataNowNum: '',
      chartData: {},
      deviceStatus: false,
      ployData: [],
      temDatas: [],
      svgDatas: [],
      typesfourthBoxTable: {
        stripe: false,
        formHead: [],
        tableAllData: []
      },
      thirdBoxTable: [],
      secondTwoBoxTable: [
        {
          icons: 'iconfont icon-shujuyuan',
          titleName: '监测数据',
          stripe: false,
          formHead: [],
          tableCheckData: []
        }
      ],
      websock: null,
      timer: null
    }
  },
  created () {
    for (let index = 0; index < 24; index++) {
      this.form.electric.powerTime.push({})
    }
    this.rolss = Cookies.get('role')
    // this.$socket.createWebSocket('ws://106.52.170.16:8090/getGraphiteWSData')
    // // this.$socket.createWebSocket('ws://192.168.117.216:8090/getGraphiteWSData')
    // this.$socket.registerCallBack('chartAllData', this.getAllData)
    this.initWebSocket()
    // 实时数据
  },
  mounted () {
    console.log(localStorage.getItem("cxLoginTToken"),'12312123312231');
    console.log('123123123123');
  },
  // beforeRouteLeave (to, from, next) {
  //   this.$socket.unRegisterCallBack('chartAllData')
  //   this.$socket.routerLeaveClose()
  //   next()
  // },
  destroyed () {
    this.websock.close() // 离开路由之后断开websocket连接
  },
  // destroyed () {
  //   console.log('+++++离开')
  //   this.$socket.unRegisterCallBack('chartAllData')
  //   this.$socket.routerLeaveClose()
  // },
  methods: {
    getTimeNow (params) {
      var dateEnd = params || new Date()
      this.year = dateEnd.getFullYear()
      this.month = dateEnd.getMonth() < 10 ? '0' + (dateEnd.getMonth() + 1) : dateEnd.getMonth() + 1
      this.date = dateEnd.getDate() < 10 ? '0' + dateEnd.getDate() : dateEnd.getDate()
      this.hour = dateEnd.getHours() < 10 ? '0' + dateEnd.getHours() : dateEnd.getHours()
      this.minute = dateEnd.getMinutes() < 10 ? '0' + dateEnd.getMinutes() : dateEnd.getMinutes()
      this.second = dateEnd.getSeconds() < 10 ? '0' + dateEnd.getSeconds() : dateEnd.getSeconds()
      const endTime = this.year + '-' + this.month + '-' + this.date + ' ' + this.hour + ':' + this.minute + ':' + this.second
      return endTime
    },
    // 实时装炉数据获取
    getData () {
      const endTime = this.getTimeNow()
      const params = {
        startTime: this.startTime,
        endTime: endTime
      }
      graphiteReportGet(params).then(res => {
        // console.log('当前炉数据', res)
        if (!res.data.data.pageData) {
          this.noDatas = true
        } else {
          this.noDatas = false
          var form = res.data.data.pageData[0].stove
          this.form = form
        }
      })
    },
    handleClick (tab) {
      this.historyif = false
      this.tableif = false
      this.displacementif = false
      // this.potif = false
      switch (tab.name) {
      case 'realTimeData':
        this.tableif = true
        break
      case 'historyInformation':
        // this.potif = true
        this.historyif = true
        break
        case 'displacementChange':
          this.displacementif = true
        break
      default:
        break
      }
    },
    initWebSocket () {
      this.websock = new WebSocket('ws://101.42.233.226:8060/getGraphiteWSData')
      // this.websock = new WebSocket('ws://106.52.170.16:8090/getGraphiteWSData') // 106
      // this.websock = new WebSocket('ws://192.168.240.216:8060/getGraphiteWSData') // 申
      this.websock.onmessage = this.websocketonmessage
      this.websock.onerror = this.websocketonerror
    },
    websocketonerror () {
      this.reconnect()
    },
    websocketonmessage (e) {
      console.log('接收到的石墨化数据', JSON.parse(e.data))
      const redata = JSON.parse(e.data)
      this.getAllData(redata)
    },
    reconnect () {
      // 重连
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.initWebSocket()
      }, 5000)
    },
    // 调后台数据的接口统一在这个组件写 统一传给子组件
    // 第二栏的table数据
    getStoveData (data) {
      // console.log('是不是undivided', data)
      const formHead = [
        { '名称(单位)': 'key' },
        { 实时: 'now' },
        { '15分钟': 'fifteen' },
        { '30分钟': 'thirty' },
        { '1小时': 'hour' }
      ]
      // if (data.length > 0) {
      this.secondTwoBoxTable[0].formHead = formHead
      this.secondTwoBoxTable[0].tableCheckData = data
      // }
    },
    getFanFrequency (data) {
      this.chartData = JSON.parse(JSON.stringify(data))
      for (var name in this.chartData) {
        this.$set(this.ployData, parseInt(name.charAt(name.length - 1)) - 1, this.chartData[name])
      }
    },
    // 中间下面的
    getMachineData (data) {
      this.thirdBoxTable = data || []
    },
    getSvgDatas (data, deviceStatus) {
      for(var i=0;i<data.length;i++){
        // console.log('222');
        if(data[i].key == 'Time'){
          data[i].value = data[i].value.substring(5,16)
          // console.log('1111');
        }
      }
      this.svgDatas = data
      // console.log('1111',this.svgDatas);
      this.deviceStatus = deviceStatus
    },
    getTemper (data) {
      if (data.source2 !== undefined) {
        this.openData = JSON.parse(JSON.stringify(data))
        this.showOpen = true
      } else {
        this.showOpen = false
      }
      var copyPot = JSON.parse(JSON.stringify(data.source1))
      copyPot[0][2] && copyPot[0].splice(2, 1)
      this.temDatas = copyPot
    },
    getAllData (ret) {
      if (ret !== undefined) {
        // console.log('ret接收的石墨化', ret)
        this.getSvgDatas(ret.graConfiguration, ret.graDeviceStatus)
        this.getStoveData(ret.table)
        this.getMachineData(ret.graphiteLine.source)
        this.getFanFrequency(ret.stoveAndVA)
        this.getTemper(ret.graTemper)
        var stoveCode = null
        var getTime = null
        for (let index = 0; index < ret.graConfiguration.length; index++) {
          const element = ret.graConfiguration[index]
          stoveCode = element.key === '炉号' ? element.value : stoveCode
          getTime = element.key === 'Time' ? element.value : getTime
        }
        // 处理送电时长
        let duration = ret.graConfiguration[50].value
        duration = duration.replace('小时', '-')
        duration = duration.replace('分', '')
        const durations = duration.split('-')
        var durationMinutes = Number(durations[0] * 60) + Number(durations[1])
        var DateNow = new Date()
        DateNow = new Date(DateNow.setMinutes(DateNow.getMinutes() - durationMinutes - 60))
        this.startTime = this.getTimeNow(DateNow) // startTime为送电时长

        this.stoveCode = stoveCode
        this.getTime = getTime
        this.getData()
      }
    },
    showMore (data) {
      if (data === 'resistance') { // 炉阻
        this.centerDialogVisible = true
        this.titleChart = '炉阻曲线'
        this.curentCompont = 'Recharts'
        this.RdataNow = this.openData.source1
        this.RdataNowNum = this.openData.source1[0][2]
        this.RdataLast = this.openData.source2
        this.RdataLastNum = this.openData.source2[0][2]
      } else {
        this.centerDialogVisible = true
        this.titleChart = '功率vs位移'
      }
    }
  }
}
</script>

